<template>
  <el-container class="home_container">
    <el-header>
      <el-row :gutter="20">
        <el-col :span="22">
          <div>
            <p class="gowel" @click="goWelcome">图书管理系统</p>
          </div>
        </el-col>
        <el-col :span="2">
          <el-dropdown @command="handleCommand" width="150px">
            <span class="el-dropdown-link">
              <el-avatar
                class="userimg"
                :src="
                  showLoginUser.userimg || userInfo.userimg
                    ? showLoginUser.userimg || userInfo.userimg
                    : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
                "
              ></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a"> 退出 </el-dropdown-item>
              <el-dropdown-item command="b">个人设置</el-dropdown-item>
              <!-- <el-dropdown-item command="c">修改密码</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- 导航菜单区域 -->
        <!-- 展开按钮 -->
        <div class="toggle_menu" @click="toggle_button">|||</div>
        <el-menu
          default-active="1-4-1"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          unique-opened
        >
          <el-menu-item
            v-for="(item, index) in menuList"
            :key="index"
            :index="item.index"
            @click="handleItenChange(item.src)"
            open="1"
            v-show="item.showOrHide"
          >
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      // 导航菜单 是否 展开
      isCollapse: false,
      // 导航列表数据
      menuList: [
        {
          src: "/welcome",
          index: "7",
          title: "首页",
          icon: "el-icon-s-home",
          // 监听用户是不是超级管理员
          showOrHide: true,
        },
        {
          src: "/data",
          index: "1",
          title: "数据统计",
          icon: "el-icon-s-data",
          showOrHide: true,
        },
        {
          src: "/book",
          index: "2",
          title: "书籍管理",
          icon: "el-icon-s-management",
          showOrHide: true,
        },
        {
          src: "/user",
          index: "6",
          title: "用户管理",
          icon: "el-icon-user",
          // 监听用户是不是超级管理员
          showOrHide: "",
        },
      ],
      // 用户信息
      userInfo: {},
    };
  },
  created() {
    this.getLocalUserimg();
    this.setToken();
  },
  computed: {
    ...mapGetters(["showShowOrHideBool", "showLogName", "showLoginUser"]),
  },
  methods: {
    // 获取 localStorage 中的
    getLocalUserimg() {
      try {
        this.userInfo = JSON.parse(window.localStorage.getItem("loginUser"));
      } catch (e) {
        console.log(e);
      }
    },

    // 设置 token
    async setToken() {
      try {
        let token = localStorage.getItem("token");
        await this.$axios
          .get("/gettoken", { headers: { token: token } })
          .then((res) => {
            this.clearToken();
            this.$store.commit("infoLogName", res.data);
            if (res.data === "admin") {
              this.menuList[3].showOrHide = true;
            } else {
              this.menuList[3].showOrHide = false;
            }
          });
      } catch (e) {
        console.log(e);
      }
    },
    // 清除 token
    clearToken() {
      setTimeout(() => {
        localStorage.clear();
        this.$message.info("账号已过期 请重新登录");
        // location.reload();
        this.$router.push("/login");
      }, 1000 * 60 * 60 * 24);
    },
    // 注销账号 清空 缓存中的数据 刷新页面 通过导航守卫判断
    logOut() {
      window.localStorage.clear();
      location.reload();
    },
    // 控制导航菜单展开 收起
    toggle_button() {
      this.isCollapse = !this.isCollapse;
    },
    // 点击导航菜单
    async handleItenChange(e) {
      this.$router.push(e).catch((err) => err);
    },
    // 用户头像 下拉菜单
    handleCommand(command) {
      try {
        if (command == "a") {
          this.logOut();
        } else if (command == "b") {
          this.$router.push("/personal").catch((e) => e);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 点击管理系统跳转到 /welcome
    goWelcome() {
      this.$router.push("/welcome").catch((e) => e);
    },
  },
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  .home_container {
    width: 100%;
    height: 100vh;
    z-index: 1;
    .el-header {
      background-color: #b3c0d1;
      color: #333;
      text-align: center;
      line-height: 60px;
      display: flex;
      align-items: center;
      > div {
        flex: 9;
      }
      .gowel {
        cursor: pointer;
      }
      .el-dropdown {
        span {
          cursor: pointer;
          .userimg {
            position: relative;
            top: 10px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
          }
        }
      }
    }
  }
  .toggle_menu {
    cursor: pointer;
    width: 100%;
    // height: 30px;
  }
  .el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 50px;
    .el-menu {
      // border: none;
      background-color: #d3dce6;
      .el-submenu {
        .el-menu-item-group {
          background-color: #d3dce6;
        }
        .el-menu-item {
          background-color: #d3dce6;
          margin: 0;
        }
      }
    }
  }

  .el-main {
    background-color: #fff;
    color: #333;
    // text-align: center;
    // line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
}
</style>